<template>
  <div>
    <van-form @submit="onSubmit">
      <div class="login"><van-icon name="cross" class="cross" />登录</div>
      <van-field
        v-model="mobile"
        name="pattern"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ pattern, message: '请填写11位手机号' }]"
      />
      <van-field
        v-model="sms"
        name="validator"
        center
        clearable
        label="验证码"
        placeholder="请输入短信验证码"
        :rules="[{ validator, message: '请填写6位验证码' }]"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mobile: '',
      sms: '',
      pattern:/\d{11}/
    }
  },

  created () {

  },

  methods: {
    onSubmit(val){
      console.log('submit',val);
    },
    validator(val){
      return /\d{6}/.test(val)
    }
  }
}
</script>

<style scoped>
.login{
  position: relative;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #1989fa;
}
.login .cross{
  position: absolute;
  left: 15px;
  top: 17px;
}
</style>
